<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">点击1</button>
    <button id="btn2">点击2</button>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

</body>
</body>
</html>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script>
    //click(事件处理函数)
    $("#btn1").click({abc:123},function(e){
        //在第一个参数传递数据，通过e.data来获取
        console.log(e.data); //{abc: 123}

    })

    
    //on('事件名'，事件处理函数)
    $('#btn2').on('click',{bcd:789},function(e){
        console.log(e.data);  //{bcd: 789}

    })


    //事件委托
    // 事件委托的方式给 li 绑定点击事件
    // 委托对象.on('事件名','需要触发的目标',处理函数)
    var fn = function(e){
        console.log(e.data);

    }
    $('ul').on('click','li',{name:'王八蛋'},fn)
    //点击页面中的li 控制台会输出 {name: '王八蛋'}


    //移除事件
    setTimeout(()=>{
        $('ul').off('click',fn)

    },3000)


    //直接触发btn1的事件
    //当代码执行到这里的时候，会自动触发一下 btn1 的 click 事件
    setTimeout(()=>{
        $('#btn1').trigger('click')
    })

</script>